<template>
  <div class="pugtablebox">
    <div class="mb-3 flex justify-between">
      <div>
        <el-button size="small" type="success" @click="handleAdd" :icon="CirclePlus">新增</el-button>
        <el-button size="small" type="danger" @click="handleDel" :icon="Delete">批量删除</el-button>
        <el-button size="small" type="danger" @click="handleExpand" :icon="Delete">{{ expandAll ? "展开全部" : "收起全部" }}
        </el-button>
      </div>
      <div>
        <el-input v-model="keyword" class="w-50 m-2" size="small" placeholder="请输入搜索关键词" :suffix-icon="Search" />
        <el-button size="small" type="success" :icon="Search">搜索</el-button>
      </div>
    </div>
    <el-tree :data="dataSource" ref="treeRef" node-key="id" show-checkbox :default-expand-all="false"
      :highlight-current="true" :expand-on-click-node="true">
      <template #default="{ no5de, data }">
        <div class="custom-tree-node">
          <span>
            <el-tag v-if="data.indexon == 1" class="ml-1">菜单</el-tag>
            <el-tag v-if="data.indexon == 0" class="ml-1" type="info">权限</el-tag>
            <el-icon :size="18" style="margin: 0 5px;position: relative;top:2px;">
              <component :is="data.icon" />
            </el-icon>
            {{ data.name }}
          </span>
          <span>
            <el-switch v-model="data.status" inline-prompt width="60px" size="large" style="margin-right:10px"
              :active-value="1" :inactive-value="0" active-text="发布" inactive-text="不发布" />
            <el-button type="success" size="small" @click.stop="handleAppend(data)" :icon="CirclePlus">添加</el-button>
            <el-button type="danger" size="small" @click.stop="handleRemove(node, data)" :icon="Delete">删除</el-button>
          </span>
        </div>
      </template>
    </el-tree>
  </div>

  <pug-drawer ref="permissionAddRef" title="新增权限" @submit="handleSubmit">
    <el-form :model="permission" ref="permissionFormRef" :rules="rules" label-width="80px" :inline="false" size="normal">
      <el-form-item label="父权限ID" prop="parentId">
        <el-input v-model="permission.id" type="hidden"></el-input>
        {{permission}}
        <el-cascader :options="options" v-model="permission.parentId" 
        :props="{ label: 'name',value:'id',multiple: false, children:'child',checkStrictly:true,emitPath:false}" placeholder="请选择父菜单"></el-cascader>
      </el-form-item>
       <el-form-item label="菜单规则" prop="menu">
        <el-radio-group v-model="permission.menu">
          <el-radio :label="1" border>菜单</el-radio>
          <el-radio :label="0" border>权限</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="权限名称" prop="name">
        <el-input v-model="permission.name" placeholder="权限名称" style="width:35%;"></el-input>
      </el-form-item>
       <el-form-item label="权限图标" prop="icon"  v-if="permission.menu==1">
        <pug-icon-select v-model="permission.icon"></pug-icon-select>
      </el-form-item>
      <el-form-item label="前端路由" prop="frontpath"  v-if="permission.menu==1 && permission.parentId > 0">
        <el-input v-model="permission.frontpath" placeholder="前端路由" style="width:55%;"></el-input>
      </el-form-item>
      <el-form-item label="权限代号" prop="code">
        <el-input v-model="permission.code" placeholder="权限代号" style="width:35%;"></el-input>
      </el-form-item>
      <el-form-item label="请求方式" prop="method"  v-if="permission.menu==0">
        <el-select v-model="permission.method"  placeholder="请求方式">
          <el-option v-for="item in ['GET','POST','PUT','DELETE']"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="权限排序" prop="sort">
        <el-input-number v-model="permission.sort" :min="1" :max="1000" :step="1" ></el-input-number>
      </el-form-item>
      <el-form-item label="发布状态" prop="status">
        <el-switch v-model="permission.status" :active-value="1" :inactive-value="0">
        </el-switch>
      </el-form-item>
    </el-form>
  </pug-drawer>
</template>

<script setup>
import navMenuService from '@/services/navmenu/NavMenuService';
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import { CirclePlus, Top, Bottom, Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'


const options = ref([{
   id:1,
   name:"角色管理",
   parentId:0,
   child:[{
      id:4,
      name:"角色添加",
      parentId:1,
      child:[]
   }]
},{
   id:2,
   name:"产品管理",
   parentId:0,
   child:[{
      id:5,
      name:"产品添加",
      parentId:2,
      child:[]
   }]
}])


const dataSource = ref([]);
const expandAll = ref(false)
var treeRef = ref(null);

const handleExpand = () => {
  expandAll.value = !expandAll.value;
  for (var i = 0; i < treeRef.value.store._getAllNodes().length; i++) {
    treeRef.value.store._getAllNodes()[i].expanded = !treeRef.value.store._getAllNodes()[i].expanded;
  }
}


const permissionAddRef = ref(null);
const permissionFormRef = ref(null);

const rules = {
  name: [{
    required: true,
    message: '权限名称不能为空',
    trigger: 'blur'
  }]
};

const permission = reactive({
  id:0,
  parentId:0,
  menu:0,
  name:"",
  code:"",
  method:"GET",
  status:1,
  sort:100,
  order:0,
  icon:"",
  frontpath:""
})



const handleSubmit = () => {
  permissionFormRef.value.validate((valid) => {
    if (!valid) {
      return;
    }
    permissionAddRef.value.showLoading();
    alert("保存数据" + JSON.stringify(permission))
  })
}

const handleAdd = () => {
  permissionAddRef.value.open();
}

const handleDel = () => {

}

const handleAppend = (data) => {
  permissionAddRef.value.open();
  console.log(data)
}

const handleRemovve = (node, data) => {
  console.log(data)
}


onMounted(() => {
  navMenuService.getMenuList().then(res => {
    dataSource.value = res.data;
  })
})

</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.el-tree-node {
  margin: 8px 0 0;
}
</style>